<template>
  <div class="mod-config">
    <basic-container>
      <headAssessment
        :sign="{ a: true, b: false, c: false, d: false }"
      ></headAssessment>
      <div class="boxsty zhiBiao">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">考核事件查看</div>
        </div>
        <el-form
          inline
          :model="dataForm"
          @keyup.enter.native="getDataList()"
          class="form-inline"
          label-width="150px"
          label-position="left"
        >
          <el-row :gutter="16">
            <el-col :span="8">
              <el-form-item label="考核对象">
                <el-input
                  v-model="dataForm.name"
                  placeholder="考核对象"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属部门">
                <el-input
                  v-model="dataForm.deptName"
                  placeholder="所属部门"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="加扣分总数">
                <el-row :gutter="16">
                  <el-col :span="10">
                    <el-input v-model="dataForm.minScore"></el-input>
                  </el-col>
                  <el-col :span="4"> 至 </el-col>
                  <el-col :span="10">
                    <el-input v-model="dataForm.maxScore"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="加扣金额">
                <el-row :gutter="16">
                  <el-col :span="10">
                    <el-input v-model="dataForm.minSalary"></el-input>
                  </el-col>
                  <el-col :span="4"> 至 </el-col>
                  <el-col :span="10">
                    <el-input v-model="dataForm.maxSalary"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="录入时间">
                <el-input v-model="dataForm.createTime"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件类别">
                <el-input v-model="dataForm.eventCate"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              class="marginLeft"
              @click="getDataList()"
              >检索</el-button
            >
          </el-form-item>
        </el-form>
        <div class="entry">
          <el-radio-group v-model="dataForm.module" @change="getDataList()">
            <el-radio label="PERSON">个人</el-radio>
            <el-radio label="DEPT">机构</el-radio>
          </el-radio-group>
        </div>
        <el-table
          :data="dataList"
          v-loading="dataListLoading"
          stripe border
          class="avue-crud"
          height="450px"
        >
          <el-table-column
            prop=""
            label="序号"
            :formatter="nShowIndex"
          ></el-table-column>
          <el-table-column prop="deptName" label="所属部门"></el-table-column>
          <el-table-column
            v-if="dataForm.module == 'PERSON'"
            prop="identity"
            label="员工编号"
          ></el-table-column>
          <el-table-column
            v-if="dataForm.module == 'PERSON'"
            prop="name"
            label="姓名"
          ></el-table-column>
          <el-table-column prop="eventCate" label="事件类别"></el-table-column>
          <el-table-column prop="des" label="事件描述"></el-table-column>
          <el-table-column prop="score" label="加扣分值"></el-table-column>
          <el-table-column prop="salary" label="加扣金额"></el-table-column>
          <el-table-column prop="endTime" label="结束时间"> </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            :formatter="statusFormatter"
          ></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="detail(scope.row.id)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </basic-container>
    <detail
      v-if="visible"
      :visible="visible"
      :id="id"
      :module="dataForm.module"
      @close="visible = false"
    ></detail>
  </div>
</template>

<script>
import { getAssessmentEventPage } from "@/api/assessment/event";
import { mapGetters } from "vuex";
import detail from "./detail";
export default {
  components: {
    detail,
  },
  data() {
    return {
      visible: false,
      id: null,
      dataForm: {
        module: "PERSON",
        userName: "",
        userCode: "",
        jjFfzt: "",
        jjDeptId: "",
      },
      options: [
        { value: "未发放", label: "未发放" },
        { value: "已发放", label: "已发放" },
      ],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      addOrUpdateAllVisible: false,
      deptId: "", //负责部门ID
      deptName: "", //负责部门名称
    };
  },
  components: {
    detail,
  },
  created() {
    this.getDataList();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    detail(id) {
      this.id = id;
      this.visible = true;
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      getAssessmentEventPage(
        Object.assign(
          {
            current: this.pageIndex,
            size: this.pageSize,
          },
          this.dataForm
        )
      )
        .then((response) => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total;
        })
        .finally(() => (this.dataListLoading = false));
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1;
    },
   statusFormatter(row, column, cellValue, index) {
      if (cellValue == 0) {
        return "未提交";
      } else if (cellValue == -1) {
        return "不通过";
      } else if (cellValue == 1 || cellValue == 2) {
        return "已提交";
      } else if (cellValue == 3) {
        return "通过";
      }
    },
  },
};
</script>
